<template>
  <div v-if="tkIsShow">
      <div class="zhezhao"></div>
      <div class="tankuang">
          <div class="tk_title">{{ title }}</div>
          <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
          <div class="tk_content">
              <el-button type="primary" @click="edit(0,'add')" class="addBTN">新建分类</el-button>
              <el-table
                      :data="tableData"
                      style="width: 100%;"
                      height="90%">
                      <el-table-column
                      prop="sortName"
                      label="名称"
                      width="200">
                      </el-table-column>
                      <el-table-column
                      label="是否显示"
                      width="150">
                      <template slot-scope="scope">
                          <span>{{ scope.row.isShow==1?'显示':'不显示' }}</span>
                          <el-button @click="openTips(scope.row.id,1,scope.row.isShow)" type="text" size="medium " style="margin-left: 10px;color: #FF8F00;">{{ scope.row.isShow==0?'显示':'隐藏' }}</el-button>
                      </template>
                      </el-table-column>
                      <el-table-column
                      prop="level"
                      label="排序（数字越大越靠前）"
                      width="200">
                      </el-table-column>
                      <el-table-column
                      label="操作"
                      width="200">
                      <template slot-scope="scope">
                          <el-button @click="edit(scope.row.id,'edit',scope.row)" type="text" size="medium ">编辑</el-button>
                          <el-button @click="openTips(scope.row.id,2,0)" type="text" size="medium " style="color: #FF0101;">删除</el-button>
                          <el-button @click="toImageList(scope.row.id)" type="text" size="medium " style="color: #FF8F00;">添加图片</el-button>
                      </template>
                      </el-table-column>
                  </el-table>
                  <pagination
                  :total="total"
                  :limit="pageSize"
                  :page="pageNumber"
                  @pageChange="pageChange"
                  ></pagination>
          </div>
      </div>
      <tips-box
        ref="tipsBox"
        @confirmTip="confirmTip"
      ></tips-box>
      <add-tempSort
          ref="addTempSort"
          @close="
              getData();
          "
      ></add-tempSort>
      <temp-image
          ref="tempImage"
      ></temp-image>
  </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import tipsBox from "@/components/tipsBox.vue";
import addTempSort from "@/components/addTempSort.vue";
import tempImage from "@/components/tempImage.vue";
export default {
  components: {
  Pagination,
  tipsBox,
  addTempSort,
  tempImage
},
data() {
  return {
      total: 0,
      pageSize: 30,
      pageNumber: 1,
      tkIsShow:false,
      title:"",
      parentId:0,
      tableData:[],
      type:1
  };
},
methods: {
  __init(id,type) {
    this.parentId=id;
    this.type=type;
    this.getData();
  },
  getData(){
      var url="manager/getTemplateImageByPage";
      var params={
          pageSize: this.pageSize,
          pageNum: this.pageNumber,
          parentId:this.parentId,
          type:this.type
      }
      this.$post(url, params).then((res) => {
          console.log(res)
          if (res.code === 0) {
          this.total = res.data.total;
          this.tableData=res.data.list;
          } else {
          this.$message.error(res.msg)
          }
      });
  },
  closeTk(){
      this.tkIsShow = false;
      this.$emit("close");
  },
  openTips(id,type,ishow){
      if(ishow==1){
        ishow=2;
      }else{
        ishow=1;
      }
      this.editForm={
          id:id,
          type:type,
          ishow:ishow
      }
      var tipContent="";
      if(type==1){
          tipContent="确定修改此分类的显示状态吗？"
      }else if(type==2){
          tipContent="确定要删除此分类吗？"
      }
      if (this.$refs.tipsBox) {
          // 显示当前详情
          this.$refs.tipsBox.tkIsShow = true;
          this.$refs.tipsBox.title = "温馨提示";
          this.$refs.tipsBox.tipContent=tipContent;
      }
  },
  closeTips(){
      if (this.$refs.tipsBox) {
          // 显示当前详情
          this.$refs.tipsBox.tkIsShow = false;
      }
  },
  confirmTip(){
      if(this.editForm.type==1){
          //执行修改显示状态
          this.updateSortStatusById();
      }else if(this.editForm.type==2){
          //执行删除
          this.deleteSortById();
      }
  },
  updateSortStatusById(){
      var url="manager/updateTemplateImageSortStatus";
      var params={
          id: this.editForm.id,
          isShow: this.editForm.ishow
      }
      this.$post(url, params).then((res) => {
          console.log(res)
          if (res.code === 0) {
              this.$message.success(res.msg)
              this.getData();
              this.closeTips();
          } else {
              this.$message.error(res.msg)
          }
      });
  },
  deleteSortById(){
      var url="manager/delTemplateImageByPage";
      var params={
          id: this.editForm.id
      }
      this.$post(url, params).then((res) => {
          console.log(res)
          if (res.code === 0) {
              this.$message.success(res.msg)
              this.getData();
              this.closeTips();
          } else {
              this.$message.error(res.msg)
          }
      });
  },
  edit(id,str,item){
      if(str=='add'){
          if (this.$refs.addTempSort) {
              this.$refs.addTempSort.tkIsShow = true;
              this.$refs.addTempSort.title = "新增分类";
              this.$refs.addTempSort.__init("add",0,this.parentId,item,this.type);
          }
      }else{
          if (this.$refs.addTempSort) {
              this.$refs.addTempSort.tkIsShow = true;
              this.$refs.addTempSort.title = "编辑分类";
              this.$refs.addTempSort.__init("edit",id,this.parentId,item,this.type);
          }
      }
  },
  toImageList(id){
    if (this.$refs.tempImage) {
      this.$refs.tempImage.tkIsShow=true;
      this.$refs.tempImage.title="素材模板图片";
      this.$refs.tempImage.__init(id,this.type);
    }
  }
}
}
</script>
<style scoped lang="scss">
.zhezhao{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
  top: 0;
  left: 0;
  z-index: 100;
}
.tankuang{
  position: fixed;
  width: 50%;
  height: 60%;
  background-color: #fff;
  top: 15%;
  left: 25%;
  z-index: 101;
  border-radius: 5px;
}
.tk_title{
  font-size: 17px;
  margin: 15px 0;
  height: 25px;
  line-height: 25px;
}
.tk_content{
  width: 90%;
  margin-left: 5%;
  height: calc(100% - 55px);
}
.tk_close{
  position: absolute;
  width: 16px;
  height: 16px;
  top: 18px;
  right: 20px;
}
.addBTN{
  position: absolute;
  top: 10px;
  left: 2%;
}
</style>